<template>
  <el-row :gutter="20">
    <el-col :span="10" style="margin-left:50px">
      <el-card class="box-card">
        <div slot="header" style="background-color:#409EFF; color:white ">
          <span style="margin-left:30px; font-weight: bold;">
            <i class="el-icon-circle-plus-outline"></i>
            点击组员头像即可开始添加记录
          </span>
        </div>

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-user"></i>
              职员编号：
            </span>
            <!-- <el-input v-model="form.id" style="width: 260px"></el-input> -->
            {{ form.id }}
          </el-form-item>

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-connection"></i>
              职员姓名：
            </span>
            <!-- <el-input v-model="form.name" style="width: 260px"></el-input> -->
            {{ form.name }}
          </el-form-item>

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-bank-card"></i>
              职员岗位：
            </span>
            <!-- <el-input v-model="form.region" style="width: 260px"></el-input> -->
            {{ form.region }}
          </el-form-item>
          <!-- <el-form-item label="评价时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>-->

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold;color:#003D79;">
              <i class="el-icon-notebook-2"></i>
              事件类型：
            </span>
            <el-select v-model="form.event" placeholder="请选择类型">
              <el-option label="请假超过一周" value="leave"></el-option>
              <el-option label="迟到超过10次" value="late"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold;color:#003D79;">
              <i class="el-icon-notebook-2"></i>
              事件描述：
            </span>
            <el-input type="textarea" v-model="form.details"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交评论</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>

    <el-col :span="10" style="margin-left:50px">
      <el-card class="box-card">
        <div slot="header" style="background-color:#009393; color:white ">
          <span style="margin-left:30px; font-weight: bold;">备选人员</span>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
          <el-tab-pane label="A组" name="first">
            <span class="staff" @click="showData('1001', '张琪', '前端')">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>张琪</b>
              </p>
            </span>
            <span class="staff" @click="showData('1002', '王娜', '后端')">
              <img src="../../src/assets/images/user-one.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>王娜</b>
              </p>
            </span>
            <span class="staff" @click="showData('1003', '赵丽', '测试')">
              <img src="../../src/assets/images/user-two.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>赵丽</b>
              </p>
            </span>
          </el-tab-pane>
          <el-tab-pane label="B组" name="second">
            <span class="staff">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>王亮</b>
              </p>
            </span>
            <span class="staff">
              <img src="../../src/assets/images/user-one.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>汪芳</b>
              </p>
            </span>
          </el-tab-pane>
          <el-tab-pane label="C组" name="third">
            <span class="staff">
              <img src="../../src/assets/images/user-two.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>黄娜</b>
              </p>
            </span>
          </el-tab-pane>
          <el-tab-pane label="D组" name="fourth">
            <span class="staff">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>孔杰</b>
              </p>
            </span>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default ({
  name: 'MajorEvents',
  data() {
    return {
      activeName: 'second',
      form: {
        id: '请选择员工',
        name: '请选择员工',
        region: '请选择员工',
        event: '',
        details: '',
      }
    }
  },
  methods: {
    onSubmit() {
      if (this.form.id == "")
        alert("请选择员工")
      else if (
        this.form.event == ""
      )
        alert("请选择事件类型")
      else {
        alert("提交成功")
        console.log("submit!");
        this.reset()
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    reset() {
      this.form.id = "请选择员工"
      this.form.name = "请选择员工"
      this.form.region = "请选择员工"
      this.form.event = ""
      this.form.details = ""
    },
    showData(id, name, region) {
      this.form.id = id;
      this.form.name = name;
      this.form.region = region;
    }

  }
})
</script>

<style lang="less" scoped>
.box-card {
  width: 580px;
}
.el-card /deep/ .el-card__header {
  padding: 0;
  line-height: 50px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.tab {
  height: 400px;
}
.staff {
  float: left;
  margin-right: 15px;
}
</style>